<template>
    <div class="movie-detail">
          <div class="mask"></div>
        <div class="poster-bg" style="background-image: url(&quot;https://p0.pipi.cn/mmdb/25bfd602d7c807d7c3cbae3e4517bbee2a46d.jpg?imageMogr2/thumbnail/2500x2500%3E&quot;);"></div>
        <div class="detail"><div class="poster"><img :src="cinemaList.hot[1].img" class="poster-img">
        </div><div class="content"><div class="title line-ellipsis">神奇动物:邓布利多之谜</div><div class="public line-ellipsis">Fantastic Beasts:The Secrets of Dumbledore</div>
        <div class="score line-ellipsis"><span>8.0</span><span class="snum">(3.2万人评)</span></div>
        <div class="type line-ellipsis"><span>奇幻,冒险,剧情</span><div class="type-img"><span class="imax icon-bg"></span>
        </div></div><div class="public line-ellipsis">美国/143分钟</div>
        <div class="public line-ellipsis">2022-04-08中国大陆上映</div>
        </div></div><div class="movie-detail-arrow"><span class="arrow-bg"></span></div>
    </div>
</template>

<script>
export default {
    name:"Buy",
    props:["cinemaList"],
    
}
</script>

<style lang="less" scoped>
 .movie-detail {
    position: relative;
    height: 188px;
    font-size: 12px;
    overflow: hidden;
    cursor: pointer;
}
 .mask {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #333;
}
.poster-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    position: absolute;
    -webkit-filter: blur(1.2rem);
    filter: blur(1.2rem);
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .55;
}
.detail {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 19px 30px 19px 15px;
    height: 160px;
}
.poster {
    width: 110px;
    height: 150px;
    background: url(https://obj.pipi.cn/festatic/fe-trade/public/img/bg.fbcd24ee.png);
    background-size: 100% 100%;
}
.poster-img {
    width: 100%;
    height: 100%;
}

.content {
    overflow-x: hidden;
    margin-left: 12.5px;
    line-height: 1;
    color: #fff;
}
.title {
    font-size: 20px;
    margin-top: 2px;
    font-weight: 700;
    overflow: hidden;
}
.public {
    margin-top: 10px;
    opacity: .8;
}
.line-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.score {
    margin-top: 11px;
    font-size: 18px;
    font-weight: 700;
    color: #fc0;
}
.type {
    margin-top: 10px;
    opacity: .8;
}
detail-arrow {
    position: absolute;
    width: 10px;
    height: 14.6px;
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
</style>